<template>
  <d-card class="product-card" shadow="hover">
    <template #header>
      <div class="card-header">
        <!-- 使用 DevUI Avatar 组件处理图片 -->
        <d-avatar 
          :name="data.name.substring(0,1)" 
          size="lg"
          :imgSrc="data.image"
        ></d-avatar>
        <span class="title">{{ data.name }}</span>
      </div>
    </template>
    <template #content>
      <div class="info">
        <!-- 使用 DevUI Tag 组件展示价格 -->
        <d-tag type="danger" class="price-tag">¥ {{ data.price }}</d-tag>
        <div v-if="data.discount" class="discount-tag">
          <d-tag type="warning">立减{{ data.discount }}元</d-tag>
        </div>
        <div class="specs">{{ data.specs }}</div>
      </div>
    </template>
    <template #actions>
      <!-- 
        业务闭环关键点：
        点击按钮不直接跳转，而是 emit 事件给外层 MateChat 处理
      -->
      <d-button 
        variant="solid" 
        color="primary" 
        width="100%" 
        @click="$emit('buy', data)"
      >
        立即抢购
      </d-button>
    </template>
  </d-card>
</template>

<script setup lang="ts">
import { ProductData } from '../types'

// 定义标准 Props 接口
defineProps<{ 
  data: ProductData 
}>()

defineEmits<{
  buy: [data: ProductData]
}>()
</script>

<style scoped>
.product-card {
  margin: 8px 0;
  max-width: 300px;
}

.card-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.title {
  font-weight: 600;
  font-size: 14px;
}

.info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.price-tag {
  font-size: 18px;
  font-weight: bold;
}

.discount-tag {
  margin-top: 4px;
}

.specs {
  font-size: 12px;
  color: #666;
  line-height: 1.4;
}
</style>